import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Form, Input, Button, message, Alert } from 'antd';

/**
 * 卡片转账金额组件属性接口
 * 定义组件接收的props类型
 */
interface CardTransferAmountProps {
  onRefresh: () => void; // 刷新回调函数，转账成功后调用以更新父组件数据
}

/**
 * 卡片转账金额引用接口
 * 定义通过ref暴露给父组件的方法
 */
export interface CardTransferAmountRef {
  show: (cardId: number, cardNumber: string, currentBalance: number, currency: string) => void; // 显示模态框方法
  close: () => void; // 关闭模态框方法
}

/**
 * 卡片转账金额组件
 * 用于向卡片转入资金的模态框表单，通过ref暴露方法给父组件
 * @param props 组件属性
 * @returns React组件
 */
const CardTransferAmount = forwardRef<CardTransferAmountRef, CardTransferAmountProps>(({ onRefresh }, ref) => {
  const [form] = Form.useForm(); // Ant Design表单实例
  const [modalVisible, setModalVisible] = useState(false); // 模态框显示状态
  const [modalLoading, setModalLoading] = useState(false); // 模态框加载状态
  const [cardNumber, setCardNumber] = useState(''); // 卡号状态
  const [currentBalance, setCurrentBalance] = useState(0); // 当前余额状态
  const [currency, setCurrency] = useState(''); // 货币类型状态

  /**
   * 暴露方法给父组件
   * 使用useImperativeHandle自定义ref暴露的值
   */
  useImperativeHandle(ref, () => ({
    /**
     * 显示模态框并设置初始数据
     * @param _cardId 卡片ID（当前未使用）
     * @param cardNumber 卡号
     * @param currentBalance 当前余额
     * @param currency 货币类型
     */
    show: (_cardId: number, cardNumber: string, currentBalance: number, currency: string) => {
      setCardNumber(cardNumber);
      setCurrentBalance(currentBalance);
      setCurrency(currency);
      form.setFieldValue('amount', ''); // 清空金额输入框
      setModalVisible(true); // 显示模态框
    },
    /**
     * 关闭模态框并重置状态
     */
    close: () => {
      setModalVisible(false);
      form.resetFields(); // 重置表单字段
      setCardNumber('');
      setCurrentBalance(0);
      setCurrency('');
    }
  }));

  /**
   * 处理表单提交
   * 执行转账操作（当前为模拟实现）
   */
  const handleSubmit = async () => {
    try {
      // const values = await form.validateFields(); // 验证表单字段（已注释）
      setModalLoading(true); // 开始加载

      // // 这里应该调用转账API（已注释的示例代码）
      // await transferToCard({
      //   cardId: currentCardId,
      //   amount: values.amount,
      //   currency: currency
      // });

      message.success('转账成功'); // 成功提示
      setModalVisible(false); // 关闭模态框
      onRefresh(); // 调用刷新回调
    } catch (error) {
      console.error('转账失败:', error);
      message.error('转账失败'); // 错误提示
    } finally {
      setModalLoading(false); // 结束加载
    }
  };

  /**
   * 关闭模态框
   * 重置表单和状态
   */
  const handleClose = () => {
    setModalVisible(false);
    form.resetFields();
    setCardNumber('');
    setCurrentBalance(0);
    setCurrency('');
  };

  /**
   * 设置全部金额
   * 将当前余额设置为转账金额
   */
  const setAllAmount = () => {
    form.setFieldValue('amount', currentBalance);
  };

  return (
    <Modal
      title="转账到卡片" // 模态框标题
      open={modalVisible} // 控制模态框显示
      onCancel={handleClose} // 取消回调
      footer={[
        <Button key="cancel" size="large" disabled={modalLoading} onClick={handleClose}>
          取消 {/* 取消按钮 */}
        </Button>,
        <Button
          key="submit"
          type="primary"
          size="large"
          loading={modalLoading}
          onClick={handleSubmit}
        >
          确认转账 {/* 确认转账按钮 */}
        </Button>
      ]}
      width={500} // 模态框宽度
    >
      {/* 卡片信息显示 */}
      <div style={{ marginBottom: 16 }}>
        <p>卡号: {cardNumber}</p> {/* 显示卡号 */}
        <p>当前余额: {currentBalance} {currency}</p> {/* 显示当前余额和货币 */}
      </div>

      {/* Ant Design表单组件 */}
      <Form
        form={form} // 绑定表单实例
        layout="vertical" // 垂直布局
        size="large" // 大尺寸
      >
        {/* 转账金额输入字段 */}
        <Form.Item
          name="amount" // 字段名
          label={`转账金额 ${currency}`} // 标签，动态显示货币类型
          rules={[
            { required: true, message: '请输入转账金额' }, // 必填验证
            {
              validator: (_, value) => {
                if (value && value > currentBalance) {
                  return Promise.reject(new Error('转账金额不能超过当前余额')); // 金额不能超过余额
                }
                if (value && value <= 0) {
                  return Promise.reject(new Error('转账金额必须大于0')); // 金额必须大于0
                }
                return Promise.resolve();
              }
            }
          ]}
          extra={ // 额外的提示信息
            <Button type="link" size="small" onClick={setAllAmount}>
              全部转入 {/* 全部转入按钮 */}
            </Button>
          }
        >
          <Input
            type="number" // 数字输入类型
            placeholder="请输入转账金额" // 占位符
            min={0} // 最小值
            max={currentBalance} // 最大值
          />
        </Form.Item>
      </Form>

      {/* 信息提示框 */}
      <Alert
        message="转账操作将实时处理，资金将立即转入目标卡片" // 提示消息
        type="info" // 信息类型
        showIcon // 显示图标
        style={{ marginTop: 16 }} // 顶部间距
      />
    </Modal>
  );
});

export default CardTransferAmount; // 导出组件